import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Alert } from 'react-native';
import Icon from "react-native-vector-icons/Feather";

export default class IconList extends Component {
    jump() {
        Alert.alert('跳转','开发中...');
    }
    render() {
        const { icon,name } = this.props;
        
        return (
            <TouchableWithoutFeedback onPress={this.jump}>
                <View style={styles.item}>
                    <View style={styles.leftChild}>
                        <Icon name={icon} size={20}/>
                        <Text style={styles.listText}>{name}</Text>
                    </View>
                    <Icon name="arrow-right" size={20} color="#999"/>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

const styles = StyleSheet.create({
    item: {
        display:"flex",
        flexDirection:"row",
        alignItems:"center",
        justifyContent:"space-between",
        marginTop:15,
        paddingTop: 15
    },
    leftChild: {
        display:"flex",
        flexDirection:"row",
        alignItems:"center",
    },
    listText: {
        fontSize: 20,
        marginLeft: 15,
        color: "#555",
        fontWeight: "400"
    }
});